<template>
  <div class="container">
    <div class="search-box">
      <el-form
        :model="form"
        ref="form"
        label-width="80px"
        :inline="true"
        size="small"
      >
        <el-form-item label="视频名称">
          <el-input v-model="form.name" placeholder="视频名称"></el-input>
        </el-form-item>
        <el-form-item label="视频分类">
          <el-select v-model="form.cateId" placeholder="视频分类" clearable>
            <el-option
              v-for="item in cateOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id + ''"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleQuery"
            >查 询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <ul class="content">
      <li class="video-item" v-for="item in videoList" :key="item.id" @click="goVideoDetail(item.id)">
        <img :src="item.image" alt="视频图片">
        <h4>{{item.name}}</h4>
      </li>
    </ul>

    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.pageNum"
        :page-sizes="[4, 8, 16]"
        :page-size="form.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="total"
        style="margin-top: 10px"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import videosApi from "@/api/videos";
export default {
  name:"videos",
  data() {
    return {
      cateOptions: [],
      form: {
        name: null,
        cateId: null,
        pageNum: 1,
        pageSize: 8,
      },
      unImage:'@/assets/img/404.png',
      videoList: [],
      total: 0,
    };
  },
  created() {
    this.getCateList();
    this.getList();
  },
  methods: {
    getCateList() {
      videosApi
        .getCateOne()
        .then(({ data: res }) => {
          if (res.code === 200) {
            this.cateOptions = res.data.list;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getList() {
      videosApi
        .query(this.form)
        .then(({ data: res }) => {
          if (res.code === 200) {
            this.videoList = res.data.records;
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange(pageNum) {
      this.form.pageNum = pageNum;
      this.getList();
    },
    handleSizeChange(pageSize) {
      this.form.pageSize = pageSize;
      this.getList();
    },
    handleQuery() {
      this.form.pageNum = 1;
      this.getList();
    },
    goVideoDetail(id) {
      this.$router.push({
        path:'/video',
        query:{id}
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
.search-box{
  display: flex;
  justify-content: flex-end;
  padding-right: 25px;
}
.content {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .video-item {
    cursor: pointer;
    margin: 20px;
    width: 22%;
    height: 220px;
    background: #fff;
    img{
      width: 100%;
      height: 180px;
    }
    h4{
      box-sizing: border-box;
      padding-left: 10px;
      line-height: 30px;
      color: royalblue;
    }
  }
}
.page-box {
  display: flex;
  justify-content: center;
}
</style>